<template>
  <div class="app-container" style="background-color:#ecf0f5 !important">
    <!-- 按钮权限
     v-permission="['airExponent:airExponentMonth:read']" -->
    <!-- 查询和其他操作 -->
    <div class="filter-container" style="background-color:#ecf0f5 !important">
      <el-date-picker
        v-model="month"
        type="month"
        clearable
        class="filter-item"
        placeholder="选择月"
      />
      <el-select
        v-if="this.$store.state.user.fsiteLevel == 3"
        disabled
        class="filter-item"
        clearable
        filterable
        @change="schoolChange"
        v-model="schoolValue"
        placeholder="请选择客户"
      >
        <el-option
          v-for="item in schoolOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-select
        v-else
        class="filter-item"
        clearable
        filterable
        @change="schoolChange"
        v-model="schoolValue"
        placeholder="请选择客户"
      >
        <el-option
          v-for="item in schoolOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-select
        clearable
        filterable
        class="filter-item"
        @change="placeChange"
        v-model="placeValue"
        placeholder="请选择楼"
      >
         <el-option
          v-for="item in placeOptions"
          :key="item.fpointNo"
          :label="item.fpointName"
          :value="item.fpointNo"
        >
        </el-option>
      </el-select>
      <el-select
        clearable
        filterable
        class="filter-item"
        v-model="classroomValue"
        placeholder="请选择地点"
      >
        <el-option
          v-for="item in classroomOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-button
        class="filter-item"
        :style="{background:buttonColor.lookup,color:buttonColor.color}"
        icon="el-icon-search"
        @click="handleFilter"
        >查找</el-button
      >
      <download-excel
                  class="export-excel-wrapper filter-item"
                  :data="DetailsForm"
                  :fields="json_fields"
                  header="每月空气"
                  name="每月空气.xls"
                >
                <el-button type="primary"
                :style="{background:buttonColor.export,color:buttonColor.color}"
                 icon="el-icon-download"
                          >导出</el-button>
                </download-excel>
    </div>
    <div class="list">
      <div class="uni-flex uni-row off" style="min-height: 2rem">
        <div class="text1Title">时间</div>
        <div class="text2Title">指标</div>
        <div class="text2Title">PM2.5</div>
        <div class="text2Title">PM10</div>
        <div class="text2Title">CO2</div>
        <div class="text2Title">TVOC</div>
        <div class="text2Title">CH2O</div>
        <div class="text2Title">H</div>
        <div class="text2Title">T</div>
      </div>
      <div
        v-for="(item) in dataList"
        :key="item.fsiteNo"
        class="uni-flex uni-row on"
      >
        <div class="text1">{{ item.fmoniterDate | dateFormat }}</div>
        <div class="text2" v-if="item.zhibiao === '未知' || item.zhibiao === null">-</div>
        <div class="text2" v-else>{{ item.zhibiao }}</div>
        <div class="text2">{{ item.pm25 }}</div>
        <div class="text2">{{ item.pm10 }}</div>
        <div class="text2">{{ item.co2 }}</div>
        <div class="text2">{{ item.tvoc }}</div>
        <div class="text2">{{ item.ch2O }}</div>
        <div class="text2" v-if="item.h">{{ item.h }}</div>
        <div class="text2" v-else>-</div>
        <div class="text2" v-if="item.t">{{ item.t }}</div>
        <div class="text2" v-else>-</div>
      </div>
    </div>

    <div>
      <div id="myChartmonthAirMonitor" :style="{width: '100%', height: '250px',backgroundColor:'#fff'}" />
    </div>

    <div>
      <div id="myChartpm10monthAirMonitor" :style="{width: '100%', height: '250px',backgroundColor:'#fff',marginTop:'30px'}" />
    </div>

    <div>
      <div id="myChartco2monthAirMonitor" :style="{width: '100%', height: '250px',backgroundColor:'#fff',marginTop:'30px'}" />
    </div>


    <div>
      <div id="myCharttvocmonthAirMonitor" :style="{width: '100%', height: '250px',backgroundColor:'#fff',marginTop:'30px'}" />
    </div>


    <div>
      <div id="myChartch2OmonthAirMonitor" :style="{width: '100%', height: '250px',backgroundColor:'#fff',marginTop:'30px'}" />
    </div>


    <div>
      <div id="myCharthmonthAirMonitor" :style="{width: '100%', height: '250px',backgroundColor:'#fff',marginTop:'30px'}" />
    </div>


    <div>
      <div id="myCharttmonthAirMonitor" :style="{width: '100%', height: '250px',backgroundColor:'#fff',marginTop:'30px'}" />
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
import { tableColor,titleColor ,buttonColor} from '@/filters/index'
import {
  fsiteOptionsByLevel,
  fpointOptions3,
} from "@/api/area";
import { listPointByFsiteNo2 } from '@/api/airAlarm'
import moment from "moment";

var urlStr = "";

export default {
  name: "Area",
  filters: {
    dateFormat(date) {
      if (date === undefined || date === null || date === "") {
        return "";
      }
      return moment(date).format("YYYY-MM-DD");
    },
  },
  data() {
    return {
      buttonColor:buttonColor,
      month: this.beforeMonth(),
      dataList: null,
      listQuery: {
        date: undefined,
        fsiteNo: undefined,
      },
      provinceValue: "",
      schoolOptions: null,
      schoolValue: "",
      placeOptions: null,
      placeValue: "",
      classroomOptions: null,
      classroomValue: "",
      DetailsForm:[],
      json_fields:{
        "时间":"fmoniterDate",
        "指标":"zhibiao",
        "PM2.5":"pm25",
        "PM10":"pm10",
        "CO2":"co2",
        "TVOC":"tvoc",
        "CH2O":"ch2O",
        "H":"t",
      },
    };
  },
  computed: {
    yearMonth() {
      var date = new Date(this.month);
      var ym;
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      if (m < 10) {
        m = "0" + m;
      }
      ym = "" + y + m;
      return ym;
    },
  },
  created() {
    // 获取省
    fsiteOptionsByLevel(0)
      .then((response) => {
        if (response.data.data.list.length > 0) {
          this.provinceValue = response.data.data.list[0].value;
        }
        if(this.$store.state.user.fsiteLevel == 3){
         this.schoolValue = this.$store.state.user.fsiteNo
         this.schoolChange(this.$store.state.user.fsiteNo)
        }
        this.handleFilter();
      })
      .catch(() => {
        this.provinceValue = null;
      });
    // 获取学校
    fsiteOptionsByLevel(3)
      .then((response) => {
        this.schoolOptions = response.data.data.list;
      })
      .catch(() => {
        this.schoolOptions = [];
      });
  },
  methods: {
    //学校改变
    schoolChange(data) {
      this.placeValue = "";
      this.placeOptions = [];
      this.classroomValue = "";
      this.classroomOptions = [];
      if (data) {
        // 获取地点
        listPointByFsiteNo2(data)
          .then((response) => {
            this.placeOptions = response.data.data.list;
          })
          .catch(() => {
            this.placeOptions = [];
          });
      }
    },

    // 地点改变
    placeChange(data) {
      this.classroomValue = "";
      this.classroomOptions = [];
      if (data) {
        // 获取教室
        fpointOptions3(data)
          .then((response) => {
            this.classroomOptions = response.data.data.list;
          })
          .catch(() => {
            this.classroomOptions = [];
          });
      }
    },

    handleFilter: function () {
      if (this.classroomValue) {
        this.listQuery.fsiteNo = this.classroomValue;
        urlStr = "/report/getMonthAirDataByFpointNo";
      } else if (this.placeValue) {
        this.listQuery.fsiteNo = this.placeValue;
        urlStr = "/report/getMonthAirDataByFpointNo";
      } else if (this.schoolValue) {
        this.listQuery.fsiteNo = this.schoolValue;
        urlStr = "/report/getMonthAirDataByFsiteNo";
      } else {
        this.listQuery.fsiteNo = this.provinceValue;
        urlStr = "/report/getMonthAirDataByFsiteNo";
      }

      listAirLine({ date: this.yearMonth, fsiteNo: this.listQuery.fsiteNo })
        .then((response) => {
          this.dataList = response.data.data.list;
          this.DetailsForm=response.data.data.list;
          const categories = response.data.data.list.map(function (item) {
            return moment(item.fmoniterDate).format("YYYY-MM-DD");
          });
          const dataspm25 = [];
          const dataspm10 = [];
          const datasco2 = [];
          const datastvoc = [];
          const datasch2O = [];
          const datash = [];
          const datast = [];

          const pm25 = [];
          const pm10 = [];
          const co2 = [];
          const tvoc = [];
          const ch2O = [];
          const h = [];
          const t = [];
          response.data.data.list.map((item) => {
            pm25.push(item.pm25);
            pm10.push(item.pm10);
            co2.push(item.co2);
            tvoc.push(item.tvoc);
            ch2O.push(item.ch2O);
            h.push(item.h);
            t.push(item.t);
          });

          dataspm25.push({
            name: "PM2.5",
            type: "line",
            data: pm25,
            itemStyle: { normal: { label: { show: true } } },
            lineStyle: {
                normal: {
                      width:4
                }
            },
          });
          this.showChart(categories, dataspm25);

          dataspm10.push({
            name: "PM10",
            type: "line",
            data: pm10,
            itemStyle: { normal: { label: { show: true } } },
            lineStyle: {
                normal: {
                      width:4
                }
            },
          });
          this.showChartpm10(categories, dataspm10);

          datasco2.push({
            name: "CO2",
            type: "line",
            data: co2,
            itemStyle: { normal: { label: { show: true } } },
            lineStyle: {
                normal: {
                      width:4
                }
            },
          });
          this.showChartco2(categories, datasco2);

          datastvoc.push({
            name: "TVOC",
            type: "line",
            data: tvoc,
            itemStyle: { normal: { label: { show: true } } },
            lineStyle: {
                normal: {
                      width:4
                }
            },
          });
          this.showCharttvoc(categories, datastvoc);

          datasch2O.push({
            name: "CH2O",
            type: "line",
            data: ch2O,
            itemStyle: { normal: { label: { show: true } } },
            lineStyle: {
                normal: {
                      width:4
                }
            },
          });
          this.showChartch2O(categories, datasch2O);

          datash.push({
            name: "H",
            type: "line",
            data: h,
            itemStyle: { normal: { label: { show: true } } },
            lineStyle: {
                normal: {
                      width:4
                }
            },
          });
          this.showCharth(categories, datash);

          datast.push({
            name: "T",
            type: "line",
            data: t,
            itemStyle: { normal: { label: { show: true } } },
            lineStyle: {
                normal: {
                      width:4
                }
            },
          });
          this.showChartt(categories, datast);
        })
        .catch(() => {
          this.categories = [];
          this.datas = [];
        });
    },
    showChart(categories, datas) {
      // 基于准备好的dom，初始化echarts实例
      const myChartmonthAirMonitor = this.$echarts.init(document.getElementById("myChartmonthAirMonitor"));
      // 绘制图表
      myChartmonthAirMonitor.setOption({
        title: {
          text: "PM2.5",
          left: "center",
           textStyle:{
      　　　　 fontSize:24
          }
        },
        color: ["#4472C5"],
        grid: {
          left: "10%",
          right: "10%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: categories,
           axisLabel: {
            show: true,
              textStyle: {
                fontSize : 16  ,   //更改坐标轴文字大小
              }
         },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            show: true,
              textStyle: {
                fontSize : 16  ,   //更改坐标轴文字大小
              }
         },
        },
        series: datas,
        tooltip: {
          trigger: "axis",
        },
      });
    },

    showChartpm10(categories, datas) {
      // 基于准备好的dom，初始化echarts实例
      const myChartpm10monthAirMonitor = this.$echarts.init(document.getElementById("myChartpm10monthAirMonitor"));
      // 绘制图表
      myChartpm10monthAirMonitor.setOption({
        title: {
          text: "PM10",
          left: "center",
          textStyle:{
      　　　　 fontSize:24
          }
        },
        color: ["#ED7C30"],
        grid: {
          left: "10%",
          right: "10%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: categories,
          axisLabel: {
            show: true,
              textStyle: {
                fontSize : 16  ,   //更改坐标轴文字大小
              }
         },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            show: true,
              textStyle: {
                fontSize : 16  ,   //更改坐标轴文字大小
              }
         },
        },
        series: datas,
        tooltip: {
          trigger: "axis",
        },
      });
    },

    showChartco2(categories, datas) {
      // 基于准备好的dom，初始化echarts实例
      const myChartco2monthAirMonitor= this.$echarts.init(document.getElementById("myChartco2monthAirMonitor"));
      // 绘制图表
      myChartco2monthAirMonitor.setOption({
        title: {
          text: "CO2",
          left: "center",
          textStyle:{
      　　　　 fontSize:24
          }
        },
        color: ["#80FF80"],
        grid: {
          left: "10%",
          right: "10%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: categories,
          axisLabel: {
            show: true,
              textStyle: {
                fontSize : 16  ,   //更改坐标轴文字大小
              }
         },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            show: true,
              textStyle: {
                fontSize : 16  ,   //更改坐标轴文字大小
              }
         },
        },
        series: datas,
        tooltip: {
          trigger: "axis",
        },
      });
    },

    showCharttvoc(categories, datas) {
      // 基于准备好的dom，初始化echarts实例
      const myCharttvocmonthAirMonitor= this.$echarts.init(document.getElementById("myCharttvocmonthAirMonitor"));
      // 绘制图表
      myCharttvocmonthAirMonitor.setOption({
        title: {
          text: "TVOC",
          left: "center",
          textStyle:{
      　　　　 fontSize:24
          }
        },
        color: ["#FF8096"],
        grid: {
          left: "10%",
          right: "10%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: categories,
          axisLabel: {
            show: true,
              textStyle: {
                fontSize : 16  ,   //更改坐标轴文字大小
              }
         },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            show: true,
              textStyle: {
                fontSize : 16  ,   //更改坐标轴文字大小
              }
         },
        },
        series: datas,
        tooltip: {
          trigger: "axis",
        },
      });
    },

    showChartch2O(categories, datas) {
      // 基于准备好的dom，初始化echarts实例
      const myChartch2OmonthAirMonitor= this.$echarts.init(document.getElementById("myChartch2OmonthAirMonitor"));
      // 绘制图表
      myChartch2OmonthAirMonitor.setOption({
        title: {
          text: "CH2O",
          left: "center",
          textStyle:{
      　　　　 fontSize:24
          }
        },
        color: ['#73c0de'],
        grid: {
          left: "10%",
          right: "10%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: categories,
          axisLabel: {
            show: true,
              textStyle: {
                fontSize : 16  ,   //更改坐标轴文字大小
              }
         },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            show: true,
              textStyle: {
                fontSize : 16  ,   //更改坐标轴文字大小
              }
         },
        },
        series: datas,
        tooltip: {
          trigger: "axis",
        },
      });
    },

    showCharth(categories, datas) {
      // 基于准备好的dom，初始化echarts实例
      const myCharthmonthAirMonitor= this.$echarts.init(document.getElementById("myCharthmonthAirMonitor"));
      // 绘制图表
      myCharthmonthAirMonitor.setOption({
        title: {
          text: "H",
          left: "center",
          textStyle:{
      　　　　 fontSize:24
          }
        },
        color: ["#fac858"],
        grid: {
          left: "10%",
          right: "10%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: categories,
          axisLabel: {
            show: true,
              textStyle: {
                fontSize : 16  ,   //更改坐标轴文字大小
              }
         },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            show: true,
              textStyle: {
                fontSize : 16  ,   //更改坐标轴文字大小
              }
         },
        },
        series: datas,
        tooltip: {
          trigger: "axis",
        },
      });
    },

    showChartt(categories, datas) {
      // 基于准备好的dom，初始化echarts实例
      const myCharttmonthAirMonitor= this.$echarts.init(document.getElementById("myCharttmonthAirMonitor"));
      // 绘制图表
      myCharttmonthAirMonitor.setOption({
        title: {
          text: "T",
          left: "center",
          textStyle:{
      　　　　 fontSize:24
          }
        },
        color: ["#800080"],
        grid: {
          left: "10%",
          right: "10%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: categories,
          axisLabel: {
            show: true,
              textStyle: {
                fontSize : 16  ,   //更改坐标轴文字大小
              }
         },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            show: true,
              textStyle: {
                fontSize : 16  ,   //更改坐标轴文字大小
              }
         },
        },
        series: datas,
        tooltip: {
          trigger: "axis",
        },
      });
    },

    beforeMonth() {
      var a = new Date();
      var d = a.getDate();
      var yy = a - 1000 * 60 * 60 * 24 * d;
      return new Date(yy);
    },
  },
};
export function listAirLine(query) {
  return request({
    url: urlStr,
    method: "get",
    params: query,
  });
}
</script>

<style scoped>
.text1Title {
    width: 600px;
    color: #000000;
    font-weight: bold;
    text-align: center;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #f7f7f7;
    border-top: 3px solid #409EFF;
    background-color: #fff !important;
  }

  .text2Title {
    width: 350px;
    color: #000000;
    font-weight: bold;
    text-align: center;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #f7f7f7;
    border-top: 3px solid #409EFF;
    background-color: #fff !important;
  }
  .text1 {
    width: 600px;
    color: #000000;
    text-align: center;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #f7f7f7;
  }

  .text2 {
    width: 350px;
    color: #000000;
    text-align: center;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #f7f7f7;
  }
  .on {
    background: #fff;
  }

  .list {
    background-color:#ecf0f5 !important;
    padding-bottom: 30px;
    box-sizing: border-box;
    flex: 1;
    flex-direction: column;
    display: flex;
    padding-top: 10px;
    height: 30%;
    flex: 2;
    text-align: left;
  }
  .uni-row {
    flex-direction: row;
  }
  .uni-flex {
    display: flex;
    flex-direction: row;
  }
   div:hover{
    background-color: #f4f4f4;
  }
</style>
